<template>
  <div class="app">
    <van-nav-bar
      title="发表评价"
      left-text=""
      right-text="发表"
      left-arrow
      class="colnav"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="pingjiacard">
      <div class="goodsinfo">
        <div class="goodsimg">
          <img :src="orderinfo.goodsimg" alt="" />
        </div>
        <div class="info">
          <div class="goodname">{{ orderinfo.goodname }}</div>
          <div class="goodsintro">{{ orderinfo.goodsintro }}</div>
        </div>
      </div>
      <div style="display: flex; align-items: flex-end; margin-top: 8px">
        <div style="font-size: 18px; margin-right: 10px">商品评价</div>
        <van-rate
          v-model="pingjiadata.rate"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
        <div style="font-size: 18px; margin-left: 10px">好</div>
      </div>
      <van-divider />
      <van-field
        v-model="pingjiadata.content"
        autosize
        rows="5"
        type="textarea"
        maxlength="300"
        placeholder="写出您的感受，可以帮助更多的小伙伴"
        show-word-limit
        class="pingjiainputfield"
      >
        <template #button>
          <van-uploader
            v-model="pingjiadata.imageslist"
            :max-count="9"
            multiple
          />
        </template>
      </van-field>
      <van-checkbox class="pingjiacheckbox" v-model="pingjiadata.isPrivate">
        匿名评价
      </van-checkbox>
    </div>
    <div class="fuwucard">
      <div style="font-size: 18px; margin-right: 10px">服务评价</div>
      <div style="display: flex; align-items: flex-end; margin-top: 8px">
        <div style="font-size: 16px; margin-right: 10px">服务评价</div>
        <van-rate
          v-model="pingjiadata.rate"
          :size="20"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
        <div style="font-size: 16px; margin-left: 10px">非常好</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderinfo: {},
      pingjiadata: {
        rate: 0,
        content: "",
        isPrivate: false,
        imageslist: [],
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
  },
  created() {
    this.orderinfo = JSON.parse(this.$route.params.orderinfo);
  },
};
</script>
<!-- 
球桌技术
助教指导
精彩时刻
台球训练

赛事排名
比赛直播
比赛回放
比赛预告

技术分享
技巧交流
台球社交
对局分享 -->



<style scoped>
.app {
  margin: 0%;
  padding: 0;
  background-color: #f5f3f3;
  min-height: 100vh;
}
.colnav :deep(.van-nav-bar__right .van-nav-bar__text) {
  color: #fe7141;
  font-size: 18px;
}
.pingjiacard {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: white;
  margin-top: 10px;
  border-radius: 15px;
}
.goodsinfo {
  width: 100%;
  margin: 5px auto;
  display: flex;
  height: 60px;
}
.goodsimg {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
}
.goodsimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex-grow: 1;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goodname {
  font-size: 18px;
}
.goodsintro {
  font-size: 16px;
  color: gray;
}
.pingjiacheckbox {
  font-size: 15px;
  margin-top: 10px;
}
.fuwucard {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: white;
  margin-top: 10px;
  border-radius: 15px;
}
</style>
<style>
.pingjiainputfield {
  padding: 0 !important;
}
.pingjiainputfield .van-cell__value .van-field__body {
  display: block !important;
}
.pingjiainputfield
  .van-cell__value
  .van-field__body
  .van-field__button
  .van-uploader {
  display: block !important;
}
</style>